<template>
  <div class="top-left">
    <FooterTopLeftItem
      v-for="(item, index) in item_list"
      :key="index"
      :title="item.title"
      :title_url="item.title_url"
      :items="item.items"
    ></FooterTopLeftItem>
  </div>
</template>

<script>
import FooterTopLeftItem from "./FooterTopLeftItem.vue";

export default {
  name: "FooterTopLeft",
  components: {
    FooterTopLeftItem,
  },
  data: function () {
    return {
      item_list: [
        {
          title: "关于我们",
          title_url: "11",
          items: [
            {
              text: "11",
              items_url: "11",
            },
          ],
        },
        {
          title: "关于我们",
          title_url: "11",
          items: [
            {
              text: "11",
              items_url: "11",
            },
          ],
        },
        {
          title: "关于我们",
          title_url: "11",
          items: [
            {
              text: "11",
              items_url: "11",
            },
            {
              text: "11",
              items_url: "11",
            },
            {
              text: "11",
              items_url: "11",
            },
          ],
        },
        {
          title: "关于我们",
          title_url: "11",
          items: [
            {
              text: "11",
              items_url: "11",
            },
          ],
        },
        {
          title: "关于我们",
          title_url: "11",
          items: [
            {
              text: "11",
              items_url: "11",
            },
          ],
        },
        {
          title: "关于我们",
          title_url: "11",
          items: [
            {
              text: "11",
              items_url: "11",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
.top-left {
  flex: 10;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>